<template>
  <div class="ground_dateils" v-loading="loading">
    <!-- 头部 -->
    <div class="header_box">
      <span @click="goHome">
        <img
          class="imgOne"
          src="~@/assets/duZhongTai/left_icon.png"
          alt=""
          srcset=""
        />
      </span>
      <span class="title">嘟一下详情</span>
      <span>
        <!-- <img
          class="imgTwo"
          src="~@/assets/duZhongTai/more.png"
          alt=""
          srcset=""
        /> -->
      </span>
    </div>
    <div class="du_details_c">
      <!-- 嘟logo -->
      <div class="du_d_logo">
        <img
          class="du_img"
          src="~@/assets/duZhongTai/duLogo.png"
          alt=""
          srcset=""
        />
        <div>
          <div>嘟一下</div>
          <div class="times">
            发送时间：<span>{{ detailObj.createTime }}</span>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="du_d_c">
        <!-- {{ detailObj.content }} -->
        <div v-html="detailObj.content"></div>
      </div>

      <!-- 照片 -->
      <!-- <div class="imgs">
        <div v-for="(item, index) of imgList" :key="index">
          <img :src="item.imgUrl" alt="" class="img_sacle" srcset="" />
        </div>
      </div> -->
      <div class="imgs">
        <div
          class=""
          v-for="(item, index) in imgList"
          v-show="item"
          :key="index"
        >
          <img
            v-if="item"
            class="img_p"
            :src="item"
            alt="预览图片"
            @click="getImgQ(imgList, index)"
          />
        </div>
      </div>
      <!-- 照片附件 -->
      <div class="img_fu" v-if="imgList.length > 0">
        <div v-for="(item, index) of imgList" :key="index">
          <!-- <a
          href="http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png"
          >http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png</a
        > -->
          <img
            class="img_i"
            src="~@/assets/duZhongTai/img.png"
            alt=""
            srcset=""
          />
          <a :href="item">{{ item }}</a>
        </div>
      </div>
      <!-- 附件 -->
      <div class="d_file" v-if="fileList.length > 0">
        <!-- <img
          class="img_i"
          src="~@/assets/duZhongTai/file.png"
          alt=""
          srcset=""
        />
        <a
          href="http://134.84.200.220:8666/file/20230324/沙盘质控问题清单-fn-6928.xlsx"
          :download="fileName"
          >http://134.84.200.220:8666/file/20230324/沙盘质控问题清单-fn-6928.xlsx</a
        > -->
        <div v-for="(item, index) of fileList" :key="index">
          <img
            class="img_i"
            src="~@/assets/duZhongTai/file.png"
            alt=""
            srcset=""
          />
          <a :href="item" :download="fileName">{{ item }}</a>
        </div>
      </div>
      <div class="d_file" v-else></div>
      <!-- <div>-----------------------</div> -->
      <!-- <div class="d_file">
        <div v-for="(item, index) of aList" :key="index">
          <img
            class="img_i"
            src="~@/assets/duZhongTai/file.png"
            alt=""
            srcset=""
          />
          <a :href="item.hrefUrl" :download="fileName" @click="handleA(item)">{{ item.name }}</a>
        </div>
      </div> -->
      <!-- 底部 - 接收人 -->
      <div class="d_jiesou">
        <div>
          接收人:
          <!-- <span>{{
            detailObj.staffName == null ? "暂无接收人" : detailObj.staffName
          }}</span> -->
          <span>{{userString}}...</span>
          <span>{{total}}人</span>
        </div>
        <div @click.stop="handleDetails(detailObj)"><span>{{noReadNum}}</span>人未读></div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { ImagePreview } from "vant";

// 全局注册
Vue.use(ImagePreview);
export default {
  data() {
    return {
      aList: [
        {
          id: 1,
          name: "链接1",
          hrefUrl: "",
        },
        {
          id: 2,
          name: "链接2",
          hrefUrl: "",
        },
        {
          id: 3,
          name: "链接3",
          hrefUrl: "",
        },
      ],
      // listData: [
      //   "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png",
      //   "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png",
      //   "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png",
      // ], //图片数组
      imagesUrl: [],
      loading: false,
      fileName: "document.xlsx",
      // imgData: [
      //   {
      //     id: 1,
      //     url: "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png",
      //   },
      //   {
      //     id: 2,
      //     url: "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png",
      //   },
      //   {
      //     id: 3,
      //     url: "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png",
      //   },
      // ],
      detailObj: {}, //详情数据
      fileList: [], //附件
      imgList: [], //图片
      detailsId: null,
      isTogether: null,
      receiveList:[],//接收人
      userString:"",//显示的三个人名
      total:0,
      noReadNum:0,//未读数量
    };
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  watch: {},
  activated() {
    console.log("this.$route.params.item==", this.$route.params.item);
    // let paramsObj = this.$route.params.item;
    let id =
      this.$route.params.item != undefined
        ? this.$route.params.item.id
        : "" || sessionStorage.getItem("detailsId");
    let isTogether =
      this.$route.params.item != undefined
        ? this.$route.params.item.isTogether
        : "" || sessionStorage.getItem("isTogether");
    // sessionStorage.setItem("detailObj", this.$route.params.item.id);
    // const scrollPosition = sessionStorage.getItem("detailObj");
    // console.log("------", scrollPosition);
    this.detailObj = {};
    // if (paramsObj) {
    // this.detailObj = paramsObj;
    // let id = paramsObj.id || this.detailsId
    console.log("id====", id);
    console.log("isTogether====", isTogether);
    this.getDetail(id,isTogether);
    // }
  },
  created() {},

  mounted() {},
  methods: {
    //返回
    goHome() {
      this.$router.go(-1); // 返回上一页
    },
    getImgQ(images, index) {
      console.log(images, index);
      ImagePreview({
        images: this.imgList,
        showIndex: true,
        loop: false,
        startPosition: index,
      });
    },
    //调取详情接口
    getDetail(id,isTogether) {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getDetails"),
        method: "get",
        params: this.$http.adornParams({
          id,
          isTogether
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.loading = false;
          // console.log("getDetails==", data);
          this.detailObj = JSON.parse(JSON.stringify(data.data[0]));
          this.detailsId = data.data[0].logId;
          this.isTogether = data.data[0].isTogether;
          sessionStorage.setItem("detailsId", this.detailsId);
          sessionStorage.setItem("isTogether", this.isTogether);

          console.log("detailsId====", this.detailsId);
          console.log("isTogether====", this.isTogether);
          console.log("--------", sessionStorage.getItem("detailsId"));
          console.log("--------", sessionStorage.getItem("isTogether"));
          console.log("detailObj====", this.detailObj);

          // this.getImgUrlOrFiles(this.detailObj.duId);
          this.getImgUrlOrFiles(this.detailObj.duId);
          this.getRecipient(this.detailsId,this.isTogether);
          this.getUnread(this.detailsId,this.isTogether);
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //获取附件
    getImgUrlOrFiles(duId) {
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getImgUrlOrFiles"),
        method: "get",
        params: this.$http.adornParams({
          duId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log("getImgUrlOrFiles==", data);
          let files = "";
          let imgs = "";
          files = data.data.files;
          // files =
          //   "http://134.84.200.220:8666/file/20230324/沙盘质控问题清单-fn-6928.xlsx";
          imgs = data.data.imgUrls;
          // imgs =
          //   "http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png,http://134.64.251.212:8084//cpcp/imgUrl/芜湖三级单元_fn_1696841492592533506.png";
          console.log("files=", files);
          console.log("imgs=", imgs);
          if (imgs != null) {
            this.imgList = imgs.split(",");
          } else {
            this.imgList = [];
          }
          console.log("this.imgList=", this.imgList);
          if (files != null) {
            this.fileList = files.split(",");
          } else {
            this.fileList = [];
          }
          console.log("this.fileList=", this.fileList);
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    handleA(item) {
      console.log("DDDD", item);
      this.aList.forEach((el) => {
        if (el.name == item.name) {
          console.log("el==", el);
          // return
          el.hrefUrl =
            "http://134.84.200.220:8666/file/20230324/沙盘质控问题清单-fn-6928.xlsx";
          console.log("el.hrefUrl==", el.hrefUrl);
        }
      });
    },
    //底部接收人数据 cpcpDuMiddleground/recipient
    getRecipient(logId,isTogether){
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/recipient"),
        method: "get",
        params: this.$http.adornParams({
          logId,
          isTogether,
          pageNum:1,
          pageSize:10
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data====",data);
          // this.receiveList = data.data.records;
          this.total = data.data.total;
          //截取前面三个人
          this.receiveList = data.data.records.filter((item,index) => index <=2)
          console.log("this.receiveList===",this.receiveList);
          let user = ""
          this.receiveList.forEach(element => {
            user += element.userName + ","
          });
          this.userString = user.slice(0, -1);  
        } else {
          Toast.fail(data.msg);
          this.receiveList = []
        }
      });
    },
    //未读人数 UNREAD unread
    getUnread(logId,isTogether){
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/noRedCount"),
        method: "get",
        params: this.$http.adornParams({
          logId,
          isTogether,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("未读数据data====",data);
          this.noReadNum = data.data;
        } else {
          Toast.fail(data.msg);
          this.noReadNum = 0;
        }
      });
    },
    // 跳转到已读未读页面
    handleDetails(item) {
      console.log("点击进入详情页item==", item);
      // this.getUpdateRed(item);
      this.$router.push({
        name: "groundReadHtml",
        params: {
          item: item,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
  //   color: #fff;
}
.header_box .imgOne {
  /* width: 25px; */
  height: 1.5625rem;
}
.header_box .imgTwo {
  width: 40px;
  /* height: 25px; */
}
.du_details_c {
  width: 96%;
  height: calc(100vh - 2.5rem);
  margin-left: 2%;
  //   border: 1px solid red;
  padding-top: 0.9375rem;
  // word-break: break-all;
  word-wrap: break-word;
}
.du_d_logo {
  padding-bottom: 0.9375rem;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
}
.du_d_logo .du_img {
  width: 2.375rem;
  margin-left: 10px;
}
.du_d_logo > div {
  margin-left: 0.625rem;
  line-height: 1.25rem;
  .times {
    font-size: 0.625rem;
    color: #8b8b8b;
  }
  span {
    color: #6f6f6f;
  }
}
.du_d_c {
  margin-top: 0.9375rem;
  line-height: 1.25rem;
}
.imgs {
  margin-top: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.imgs > div {
  width: 48%;
}
.imgs img {
  width: 98%;
  //   margin: 5px 0px;
  display: inline-block;
}
.img_fu {
  margin-top: 0.9375rem;
}
.img_fu > div {
  margin-top: 5px;
}
.img_fu > div a {
}
a {
  color: rgb(0, 152, 255);
  line-height: 20px;
}
img {
  vertical-align: sub;
}
.img_i {
  width: 1.175rem;
}
.d_file {
  margin-top: 0.9375rem;
  padding-bottom: 0.9375rem;
  border-bottom: 1px solid #e5e5e5;
}
.d_jiesou {
  margin-top: 0.9375rem;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  color: #8b8b8b;
}
.img_p {
  width: 50%;
}
</style>
